<template>
  <div class="disposal flex">
      <div class="flexC flex5" style="margin-right:0.825rem;">
        <ul class="flex list_title font_s17 colorF textC">
          <li class="flex2 title_item">序号</li>
          <li class="flex3 title_item">组织名称</li>
          <li class="flex3 title_item">临时活动名称</li>
          <li class="flex2 title_item">活动类型</li>
          <li class="flex3 title_item">境外合作机构</li>
          <li class="flex3 title_item">活动期限</li>
          <li class="flex3 title_item">活动地域</li>
        </ul>
        <ul class="colorF font_s18 Bold list_contentBox">
          <li class="flex list_content textC" v-for="item in dataList" v-bind:key="item.id">
            <p class="flex2 content_item">{{item.xh}}</p>
            <p class="flex3 content_item cursor">{{item.zzmc}}</p>
            <p class="flex3 content_item">{{item.lshdmc}}</p>
            <p class="flex2 content_item">{{item.hdlx}}</p>
            <p class="flex3 content_item">{{item.jwhzjg}}</p>
            <p class="flex3 content_item">{{item.hdqx}}</p>
            <p class="flex3 content_item">{{item.hddy}}</p>
          </li>
        </ul>
      </div>
      <!------------------ 右边栏 ----------------->
      <div class="flex3">
            <div class="flexC subtitle_right">
                <p class="colorF font_s22 LH4R" style="padding-top: 1.285rem;">
                    <img class="verticM" style="height: 1.5rem;" src="../../../assets/img/comprehensive/components/18.png" alt="" />
                    <span style="padding-left:0.825rem;">社会组织信息</span>
                </p>
                <div class="colorF" style="padding-top: 1.285rem;">
                    <p class="LH3R"><span>名称：</span><span>上海浦东新区先进音视屏技术协会</span></p>
                    <p class="LH3R"><span>成立日期：</span><span>2015年1月13日</span></p>
                    <p class="LH3R"><span>证书有效终止：</span><span>2019年6月30日</span></p>
                    <p class="LH3R"><span>登记类型：</span><span>直接登记</span></p>
                    <p class="LH3R"><span>行业主管部门/业务主管单位：</span><span>区科协</span></p>
                    <p class="LH3R"><span>法定代表人：</span><span>黄栀</span></p>
                </div>
            </div>
            <div class="flex colorF JustifyContentSA AlignItemsC" style="height: 24.5vh;">
                <p style="padding-bottom:1.875rem;font-weight:bold;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
                <p class="flexC textC">
                  <span class="rbtm rbtm_title01">预警</span>
                  <span>2018.11.4</span>
                </p>
                <p style="padding-bottom:1.875rem;font-weight:bold;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
                <p class="flexC textC">
                  <span class="rbtm rbtm_title02">推送</span>
                  <span>2018.11.4</span>
                </p>
                <p style="padding-bottom:1.875rem;font-weight:bold;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
                <p class="flexC textC">
                  <span class="rbtm rbtm_title03">反馈</span>
                  <span>2018.12.6</span>
                </p>
                <p style="padding-bottom:1.875rem;font-weight:bold;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
                <p class="flexC textC">
                  <span class="rbtm rbtm_title04">结束</span>
                  <span>2018.12.6</span>
                </p>
                <p style="padding-bottom:1.875rem;font-weight:bold;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
            </div>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: [
        { xh: 1, zzmc: '上海浦东新区先进音视屏技术协会', lshdmc: '2019亚洲消费电子展', hdlx: '中外合作', jwhzjg: '美国消费技术协会', hdqx: '2019年6月11日至2019年6月13日', hddy: '上海市浦东新区龙阳路2345号' },
        { xh: 1, zzmc: '上海浦东新区先进音视屏技术协会', lshdmc: '2019亚洲消费电子展', hdlx: '中外合作', jwhzjg: '美国消费技术协会', hdqx: '2019年6月11日至2019年6月13日', hddy: '上海市浦东新区龙阳路2345号' },
        { xh: 1, zzmc: '上海浦东新区先进音视屏技术协会', lshdmc: '2019亚洲消费电子展', hdlx: '中外合作', jwhzjg: '美国消费技术协会', hdqx: '2019年6月11日至2019年6月13日', hddy: '上海市浦东新区龙阳路2345号' },
        { xh: 1, zzmc: '上海浦东新区先进音视屏技术协会', lshdmc: '2019亚洲消费电子展', hdlx: '中外合作', jwhzjg: '美国消费技术协会', hdqx: '2019年6月11日至2019年6月13日', hddy: '上海市浦东新区龙阳路2345号' },
        { xh: 1, zzmc: '上海浦东新区先进音视屏技术协会', lshdmc: '2019亚洲消费电子展', hdlx: '中外合作', jwhzjg: '美国消费技术协会', hdqx: '2019年6月11日至2019年6月13日', hddy: '上海市浦东新区龙阳路2345号' },
        { xh: 1, zzmc: '上海浦东新区先进音视屏技术协会', lshdmc: '2019亚洲消费电子展', hdlx: '中外合作', jwhzjg: '美国消费技术协会', hdqx: '2019年6月11日至2019年6月13日', hddy: '上海市浦东新区龙阳路2345号' },
        { xh: 1, zzmc: '上海浦东新区先进音视屏技术协会', lshdmc: '2019亚洲消费电子展', hdlx: '中外合作', jwhzjg: '美国消费技术协会', hdqx: '2019年6月11日至2019年6月13日', hddy: '上海市浦东新区龙阳路2345号' },
        { xh: 1, zzmc: '上海浦东新区先进音视屏技术协会', lshdmc: '2019亚洲消费电子展', hdlx: '中外合作', jwhzjg: '美国消费技术协会', hdqx: '2019年6月11日至2019年6月13日', hddy: '上海市浦东新区龙阳路2345号' }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.disposal {
  width: 95%;
  height: 95%;
  margin: 0 auto;
  .list_title {
    background: #2954DA;
    border-radius: 8px 8px 0 0;
  }
  .title_item {
    line-height: 3.285rem;
  }
  .content_item {
    padding: 1.285rem 0;
    line-height: 1.425rem;
  }
  .list_contentBox {
    height:62vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .list_contentBox::-webkit-scrollbar {
    background: rgba($color: #fff, $alpha: 0.6);
    border-radius: 10px;
    width: 8px;
  }
  .list_contentBox::-webkit-scrollbar-thumb {
    background: rgba($color: #3659f3, $alpha: 0.8);
    border-radius: 10px;
  }
  .list_content {
    // margin: 1.25rem 0rem;
    background: #1E40AA;
    margin-top: 1.125rem;
    border-radius: 8px;
    .item_btm {
      border: 2px solid rgba(90, 161, 248, 1);
      border-radius: 10px;
      color: #7ff1ff;
      padding: 0.25rem 0.825rem;
      cursor: pointer;
      // vertical-align: middle;
    }
  }
  .subtitle_right {
    height: 43.5vh;
    padding-left: 1rem;
    background: rgba(47, 50, 57, 0.32);
    border: 0.0625rem solid rgba(9, 102, 243, 0.72);
    border-radius: 0.75rem;
  }
  .rbtm {
    padding: 0.485rem 1.285rem;
    border-radius:12px;
    margin-bottom: 0.425rem;
  }
  .rbtm_title01 {
    background:rgba(255,95,133,0.4);
    border:2px solid rgba(255,194,226,1);
  }
  .rbtm_title02 {
    background:rgba(54,208,203,0.4);
    border:2px solid rgba(127,241,255,1);
  }
  .rbtm_title03 {
    background:rgba(34,231,118,0.4);
    border:2px solid rgba(110,240,177,1);
  }
  .rbtm_title04 {
    background:rgba(85,85,227,0.4);
    border:2px solid rgba(145,160,250,1);
  }
}
</style>
